<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <style type="text/css" scoped="scoped">
        /*清除浮动*/

        .clearfloat {
            zoom: 1;
        }

        .clearfloat:after {
            display: block;
            height: 0;
            content: "";
            clear: both;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>章节管理：{{addsection.courseName}}</h1>
    <div>
        <div class="clearfloat" style="float: left;">
            <el-button type="primary" @click="addSection = true">添加章节</el-button>
        </div>
        <el-table :data="data">
            <el-table-column prop="sectionId" label="章节id" width="180px">
            </el-table-column>
            <el-table-column prop="sectionName" label="章节名称" width="700px">
            </el-table-column>

            <el-table-column label="操作" width="500px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="toUpdateSection(scope.row)">修改
                    </el-button>
                    <el-button type="primary" size="mini" @click="getDetail(scope.row)">查看小节</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="小节管理" :visible.sync="partSection">
            <div class="clearfloat" style="float: left;">
                <el-button type="primary" @click="addPartsection = true">添加小节</el-button>
            </div>
            <el-table :data="partSections">
                <el-table-column property="partIdName" label="目录" width="150"></el-table-column>
                <el-table-column property="partName" label="小节" width="200"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="toVideo(scope.row.partId)">添加视频</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="toUpdatePart(scope.row)">修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="添加章节" :visible.sync="addSection ">
            <el-form :model="addsection">
                <el-form-item label="章节名称">
                    <el-input style="width: 300px;" v-model="addsection.sectionName"></el-input>
                </el-form-item>
                <el-form-item label="添加日期" prop="sectionAddtime">
                    <el-date-picker v-model="addsection.sectionAddtime" type="date" placeholder="选择日期"
                                    value-format="yyyy/MM/dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="所属课程" prop="courseId">
                    <el-select v-model="addsection.courseName" placeholder="请选择" disabled>
                        <el-option v-for="item in courses" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    			<el-button @click="addSection  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionAdd">确 定</el-button>
 			 </span>
        </el-dialog>

        <el-dialog title="修改章节" :visible.sync="updateSection ">
            <el-form :model="section">
                <el-form-item label="章节名称">
                    <el-input style="width: 300px;" v-model="section.sectionName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属课程" prop="courseId">
                    <el-select v-model="section.courseId" placeholder="请选择">
                        <el-option v-for="item in courses" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sectionUpdate1">确 定</el-button>
                    <el-button @click="updateSection  = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="添加小节" :visible.sync="addPartsection">
            <el-form :model="partsection" label-width="180px">
                <el-form-item label="小节编号名：">
                    <el-input v-model="partsection.partIdName"></el-input>
                </el-form-item>

                <el-form-item label="小节名称：">
                    <el-input v-model="partsection.partName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
   				<el-button @click="addPartsection=false">取 消</el-button>
    			<el-button type="primary" @click="addPart">确 定</el-button>
 			 </span>
        </el-dialog>
        <el-dialog title="修改小节" :visible.sync="updatePart ">
            <el-form :model="updatepartsection">
                <el-form-item label="小节编号名：">
                    <el-input v-model="updatepartsection.partIdName"></el-input>
                </el-form-item>
                <el-form-item label="小节名称">
                    <el-input v-model="updatepartsection.partName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="partSectionUpdate1">确 定</el-button>
                    <el-button @click="updatePart  = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog :title="videoTitle" :visible.sync="addvideo">
            <el-form :model="video" label-width="180px">

                <el-form-item label="视频名称：">
                    <el-input v-model="video.videoName"></el-input>
                </el-form-item>
                <el-upload class="upload-demo" action="/api/teacher/video/upload" :on-preview="handlePreview"
                           :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
                           accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.mp4,application/vnd.ms-excel,.csv,text/plain"

                           :on-exceed="handleExceed" :file-list="fileList" :on-error="uploadError"
                           :on-success="uploadSuccess"
                           :before-upload="beforeUpload">
                    <el-button size="small" type="primary">上传视频</el-button>
                </el-upload>
            </el-form>
            <span slot="footer" class="dialog-footer">
   				<el-button @click="addvideo=false">取 消</el-button>
    			<el-button type="primary" @click="saveVideo">确 定</el-button>
 			 </span>
        </el-dialog>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            videoTitle: '添加视频',
            courseId: null,
            data: [],
            partSections: [],
            partSection: false,
            addSection: false,
            addsection: {
                scoreId: 1,
                sectionTestId: 1,
                courseId: null,
                teacherId: 1,
                sectionName: '',
                sectionAddtime: '',
                sectionModifyPerson: '0',
                sectionDelete: 1
            },
            courses: [],

            section: {
                sectionId: 1,
                scoreId: 1,
                sectionTestId: 1,
                courseId: null,
                teacherId: 1,
                sectionName: '',
                sectionAddtime: '',
                sectionModifyPerson: '0',
                sectionModifyDate: '',
                sectionDelete: 1
            },

            addPartsection: false,
            partsection: {

                sectionId: 1,
                partIdName: '',
                partName: '',
                partFrequence: 1,
                partAddtime: '',
                partModifyPerson: 'zhangsan',
                partModifyDate: '',
                partDelete: 1
            },
            updatepartsection: {
                sectionId: 1,
                partIdName: '',
                partName: '',
                partFrequence: 1,
                partAddtime: '',
                partModifyPerson: 'zhangsan',
                partModifyDate: '',
                partDelete: 1
            },
            updateSection: false,
            updatePart: false,
            video: {

                partId: null,
                videoName: '',
                videoPath: '',
                videoAdduser: 'zhangsan',
                videoAddtime: '',
                videoDelete: 1
            },
            addvideo: false,
            fileList: []

        },
        created: function () {
            this.courseId = '${courseId}';
            this.addsection.courseId=this.courseId;
            this.section.courseId=this.courseId;
            this.addsection.courseName = '${name}';
            this.sectionList1();
            let user = localStorage.getItem('teacher-user');
            if (user) {
                user = JSON.parse(user);
                this.addsection.teacherId = user.teacherId;
                this.section.teacherId = user.teacherId;
            }
            console.log(user)
            this.getCourserList();
        },
        methods: {
            getCourserList() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/courseware/getCourseList',
                    data: {},
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res)
                        _this.courses = res.resData
                    }
                })
            },
            getDetail(row) {
                console.log(row);
                this.partsection.sectionId = row.sectionId;
                this.partSections = row.partSections;
                this.partSection = true;

            },
            /*显示章节列表*/
            sectionList1() {
                console.log(this.courseId)
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/section/list',
                    data: {
                        courseId: this.courseId
                    },
                    success: function (res) {
                        console.log(res)
                        _this.data = res.resData
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },

            /*添加章节*/
            sectionAdd() {
                console.log(this.addsection)
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/section/insert',
                    data: this.addsection,
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.addsection.sectionName = '';
                            _this.addsection.sectionAddtime = '';
                            _this.addSection = false;
                            _this.sectionList1();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            /*修改章节*/
            toUpdateSection(section) {
                //this.section=section,

                this.section = section;
                console.log(this.section);
                this.updateSection = true;

            },
            sectionUpdate1() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/section/update',
                    data: JSON.stringify(this.section),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.updateSection = false;
                            _this.sectionList1();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },

            /*添加小节*/
            addPart() {

                $.ajax({
                    type: 'post',
                    url: '/api/teacher/partsection/insert',
                    data: JSON.stringify(this.partsection),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.partsection.partIdName = '';
                            _this.partsection.partName = '';
                            _this.addPartsection = false;
                            _this.partSection = false;
                            _this.sectionList1();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })

            },


            /*修改小节*/
            toUpdatePart(partsection) {
                //console.log(partSection),
                this.updatepartsection = partsection;
                this.updatePart = true
            },
            partSectionUpdate1() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/partsection/update',
                    data: JSON.stringify(this.updatepartsection),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.updatePart = false;
                            _this.sectionList1();

                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            // 上传成功后的回调
            uploadSuccess(response, file, fileList) {
                console.log('上传文件', response, fileList);
                this.video.videoPath = response.resData
                //this.addForm.coursewareSize=fileList.size
            },
            // 上传错误
            uploadError(response, file, fileList) {
                this.$message({
                    message: '上传失败，请重试',
                    type: 'info'
                })
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据
            handlePreview(file) {
                console.log('文件', file);
            },

            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2000     //这里做文件大小限制
                if (!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 2G!',
                        type: 'warning'
                    });
                }
                return isLt2M
            },
            handleExceed(files, fileList) {
                this.$message.warning('当前限制选择 1个文件，本次选择了' + files.length + '个文件，共选择了' + (files.length + fileList.length) + '个文件');
            },
            beforeRemove(file, fileList) {
                return this.$confirm('确定移除 ' + file.name + '?');
            },
            /*添加视频*/
            toVideo(partId) {
                console.log(partId);
                this.video.partId = partId;

                $.ajax({
                    type: 'post',
                    url: '/api/teacher/video/findOne',
                    data: {
                        partId: partId
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.resData) {
                            _this.video = res.resData;
                            _this.videoTitle = '修改视频'
                        }
                        _this.addvideo = true;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })


            },
            saveVideo() {
                $.ajax({
                    type: 'post',
                    url: '/api/teacher/video/insert',
                    data: JSON.stringify(this.video),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            _this.addvideo = false;
                            _this.video = {
                                partId: null,
                                videoName: '',
                                videoPath: '',
                                videoAdduser: 'zhangsan',
                                videoAddtime: '',
                                videoDelete: 1
                            }
                            _this.videoTitle = '添加视频'
                            _this.sectionList1();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'info'
                            })
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })

            }


        }
    })

</script>
</body>
</html>